<template>
  <div class="w950">
    <!-- 个人信息 -->
    <div class="center_box">
      <div class="clearfix">
        <dl class="coin_info">
          <dt>
            <img
              src="https://thirdqq.qlogo.cn/g?b=sdk&k=5HnicKC8ZJo1lw6s2TDTZpQ&s=100&t=1652140674"
              alt=""
            />
          </dt>
          <dd>
            <p><strong id="login_qq_span_index">1973744239</strong>, 欢迎你</p>
            <p>
              <span class="fl"
                >我的聚豆：<strong class="red" id="my_coin">0</strong></span
              >
              <i class="i_sp"></i>
            </p>
          </dd>
        </dl>
      </div>
      <div class="blk_coin">
        <div class="center_tab">
          <a
            href="#"
            title="所有记录"
            :class="{ current: a }"
            @click="
              a = true;
              b = false;
            "
            >所有记录</a
          >
          <a
            href="#"
            title="兑换记录"
            :class="{ current: b }"
            @click="(a = false), (b = true)"
            >兑换记录</a
          >
        </div>
        <div class="center_tbl" v-show="a">
          <!-- 所有记录 -->
          <div class="tbl_con">
            <div class="pic"></div>
            <div class="txt">
              <p class="tt">抱歉，暂无聚豆记录！</p>
              <p>您可以：</p>
              <p>
                1、参与签到活动获取聚豆，<a href="#" class="blue">立即前往></a>
              </p>
            </div>
          </div>
        </div>
        <!-- 兑换记录 -->
        <div class="center_tbl" v-show="b">
          <ul class="vat-hd">
            <li class="od1">礼品</li>
            <li class="od2">礼品类型</li>
            <li class="od3">消耗聚豆</li>
            <li class="od4">日期</li>
            <li class="od5">状态</li>
          </ul>
          <div class="loading"><span class="loadmsg">loading...</span></div>
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="favorite">
      <div class="tt">
        <h6 class="fl">猜你喜欢</h6>
        <a href="#" class="more">换一换>></a>
      </div>
      <div class="clearfix">
        <div class="fav_wrapper">
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/app/cf/rectangle/N-cf-undefined-111943-100000-r479.jpg?_t=1647423450"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  火麒麟宝箱（1个）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>6.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/dbm/cf/54KnightSR25.jpg"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  Knight SR25（30天）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>30.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/app/cf/rectangle/N-cf-1-111943-100000-s25273.jpg?_t=1605518493"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  零-水下丽影宝箱（1个）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>6.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/app/cf/rectangle/N-cf-1-111943-103936-s26239.jpg?_t=1612691407"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  春节宝箱（5个）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>28.00 QB</b>
              </p>
            </dd>
          </dl>
          <dl>
            <dt>
              <a href="#" target="_blank">
                <img
                  src="https://ossweb-img.qq.com/images/daoju/dbm/cf/107XM8-A.jpg"
                  alt=""
                />
              </a>
            </dt>
            <dd>
              <p>
                <a href="#">
                  <b class="e">[穿越火线]</b>
                  ，XM8-A（30天）
                </a>
              </p>
              <p class="red">
                商城价：
                <b>28.90 QB</b>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Rwu10",
  data() {
    return {
      a: true,
      b: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.w950 {
  width: 950px;
  height: 569px;
  .center_box {
    width: 910px;
    // height: 269px;
    height: 320px;
    margin-bottom: 10px;
    padding: 15px 20px 20px 20px;
    border: 1px solid #e6e9ef;
    background: #fff;
    .clearfix {
      width: 908px;
      height: 80px;
      .coin_info {
        width: 230.11px;
        height: 60px;
        padding: 0 10px 20px 10px;
        float: left;

        p {
          width: 130.11px;
          height: 27px;
          line-height: 27px;
          .i_sp {
            background: url(//js02.daoju.qq.com/common/images/icon.png)
              no-repeat;
            width: 20px;
            height: 20px;
            background-position: -90px -240px;
            margin-top: 2px;
            margin-right: 15px;
            float: left;
          }
        }
        dt {
          width: 60px;
          height: 60px;
          float: left;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50px;
          }
        }
        dd {
          width: 130.11px;
          height: 55px;
          padding: 5px 0 0 0;
          margin-left: 80px;
          line-height: 24px;
          span {
            font-size: 14px;
            color: #333;
            float: left;
          }
          strong {
            font: 800 16px/24px Microsoft Yahei;
            margin-right: 0;
            color: #e43333;
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }
  .blk_coin {
    width: 908px;
    // height: 187px;
    height: 240px;
    border: 1px solid #e6e9ef;
    background: #fff;
    .center_tbl {
      width: 906px;
      height: 140px;
      padding: 10px 20px;
      .loading {
        display: table;
        width: 100%;
        // height: 100%;
        background: #fff;
        _display: block;
        .loadmsg {
          display: table-cell;
          _display: block;
          vertical-align: middle;
          text-align: center;
          background: url(//daoju.qq.com/becombine/mall/images/loading.gif)
            no-repeat center center;
          padding-top: 110px;
        }
      }
      .vat-hd {
        width: 866px;
        height: 51px;
        border-bottom: 1px solid #d1d1d1;
        zoom: 1;
        list-style: none;
        .od1 {
          width: 122px;
        }
        .od2 {
          width: 200px;
        }
        .od3 {
          width: 150px;
        }
        .od4 {
          width: 206px;
        }
        .od5 {
          width: 174px;
        }
        li {
          float: left;
          text-align: center;
          font-size: 14px;
          height: 50px;
          line-height: 50px;
          overflow: hidden;
        }
      }
      .pic {
        float: left;
        width: 100px;
        height: 100px;
        background: url(//js02.daoju.qq.com/common/images/emotion.png) no-repeat;
      }
      .tbl_con {
        width: 540px;
        height: 120px;
        margin: 0 auto;
        line-height: 24px;
        padding: 10px 0;
        color: #666;
        // display: none;
        .tt {
          font-weight: 700;
          font-size: 14px;
          color: #333;
          padding-bottom: 10px;
        }
        .txt {
          width: 430px;
          height: 92px;
          margin-left: 110px;
          padding-top: 10px;
          .blue {
            color: #1994ed;
          }
        }
      }
    }
    .center_tab {
      border-bottom: 1px solid #e6e9ef;
      height: 44px;
      a {
        width: 130px;
        height: 44px;
        font-size: 14px;
        line-height: 44px;
        text-align: center;
        border-right: 1px solid #e6e9ef;
        float: left;
        text-decoration: none;
        color: #3a3f4a;
      }
      a.current {
        border-bottom: 1px solid #f74a4a;
      }
    }
  }
}
.favorite {
  width: 950px;
  height: 255px;
  border: 1px solid #e6e9ef;
  background-color: #fff;
  .tt {
    width: 930px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    border-bottom: 1px solid #e6e9ef;
    .fl {
      float: left;
      font-size: 100%;
    }
    .more {
      font-size: 12px;
      color: #1994eb;
      font-family: "\5b8b\4f53";
      float: right;
    }
  }
  .clearfix {
    width: 950px;
    height: 218px;
    dl {
      width: 122px;
      height: 162px;
      padding: 28px 32px;
      border-left: 1px solid #f3f4f6;
      float: left;
      dt {
        width: 122px;
        height: 75px;
        img {
          display: block;
          width: 90px;
          height: 75px;
          margin: 10px auto;
        }
      }
      dd {
        width: 122px;
        height: 60px;
        text-align: center;
        margin-top: 9px;
        .red {
          height: 20px;
          color: #f74a4a;
          margin: 4px 0;
        }
        p {
          height: 37px;
          overflow: hidden;
          a:hover {
            color: #f74a4a;
          }
          .e {
            display: block;
            margin: 2px 0;
          }
          b {
            margin: 2px 0;
          }
        }
      }
    }
  }
}
</style>
